<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会话列表</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/wap/css/mui.min.css">
    <style type="text/css">
        .mui-content>.mui-table-view:first-child {
            margin-top: 0;
        }
        /***群聊列表***/
        .chat-list .wechat-avatar {
            float: left;
            margin-right: 0.62999rem;
            line-height: 3rem;
            max-width: 3rem;
            height: 3rem;
        }
        .chat-list .wechat-avatar .mui-row {
            background-color: #dddee0;
            padding: 0.15rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }
        .chat-list .wechat-avatar .mui-row [class*=mui-col-xs-] {
            padding: 0.05rem;
        }
        .chat-list .wechat-avatar .mui-row [class*=mui-col-xs-] img {
            max-width: 100%;
            width: 100%;
            display: block;
        }
        .chat-list .wechat-avatar,
        .chat-list .wechat-avatar > img {
            border-radius: 50%;
        }
        .chat-list .mui-media-body>.time{
            float: right;
            font-size: 0.9rem;
            color: #999999;
        }
        .chat-list .mui-media-body>p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 0.9rem;
            color: #999999;
        }
    </style>
</head>

<body onload="connect()">
    <div class="mui-content">
    	<!-- 群聊列表 -->
        <ul class="mui-table-view chat-list">
            {foreach name='cicle_list' item='data'}
            <li id="cicle{$data.id}" class="mui-table-view-cell mui-media" cicleid="{$data.id}">
                <img class="mui-media-object mui-pull-left" src="{$data.logo}">
                <div class="mui-media-body">{$data.name}
                    <span class="time">16:26</span>
                    <p class="mui-ellipsis">11.11有话说:秒杀天天有，今天特别大</p>
                </div>
            </li>
            {/foreach}

            <!-- <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left" src="__STATIC__/wap/images/xiaomishouhuan.png">
                <div class="mui-media-body">小米手环
                    <span class="time">16:14</span>
                    <p class="mui-ellipsis">京东11.11华米专场 黑色手表预定10被订金膨胀</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <div class="wechat-avatar">
                    <div class="mui-row">
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo8.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo6.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo9.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo7.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo1.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo4.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo5.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo3.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo2.jpg" />
                        </div>
                    </div>
                </div>
                <div class="mui-media-body">HBUILD+MUI+DCLOUD(486)
                    <span class="time">15:14</span>
                    <p class="mui-ellipsis">这个问题困扰了我两天了</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <div class="wechat-avatar">
                    <div class="mui-row">
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo1.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo3.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo5.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo2.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo7.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo4.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo9.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo6.jpg" />
                        </div>
                        <div class="mui-col-xs-4">
                            <img src="__STATIC__/wap/images/demo8.jpg" />
                        </div>
                    </div>
                </div>
                <div class="mui-media-body">零点国际集团(110)
                    <span class="time">昨天</span>
                    <p class="mui-ellipsis">去吧，到时候请吃东西请玩的，就没有鲍鱼宴给你吃</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <div class="wechat-avatar">
                    <div class="mui-row">
                        <div class="mui-col-xs-6">
                            <img src="__STATIC__/wap/images/demo3.jpg" />
                        </div>
                        <div class="mui-col-xs-6">
                            <img src="__STATIC__/wap/images/demo8.jpg" />
                        </div>
                        <div class="mui-col-xs-6">
                            <img src="__STATIC__/wap/images/demo5.jpg" />
                        </div>
                        <div class="mui-col-xs-6">
                            <img src="__STATIC__/wap/images/demo7.jpg" />
                        </div>
                    </div>
                </div>
                <div class="mui-media-body">广州程序员之家(4)
                    <span class="time">10月20日</span>
                    <p class="mui-ellipsis">两个膝盖都有伤，肯定有故事</p>
                </div>
            </li> -->
        </ul>
    </div>
    <script src="__STATIC__/common/js/jquery-2.2.4.min.js"></script>
    <script>
        $(function() {
            $('.chat-list li').click(function() {
                window.location.href = 'wap/Index/cicle_chat?cicleid='+$(this).attr('cicleid');  
            });
        });

        var uid = "{$Think.session.uid}"; 
        var relaname = "{$Think.session.relaname}";
        var avator = "{$Think.session.avator}"; 

        var ws, name, client_list = {};
        var cicleids = '';                  // 我加入的群id

        // 连接服务端
        function connect() {
            cicleids = '';             
            $('.chat-list li').each(function() {
                if(!cicleids) {cicleids += ''+$(this).attr('cicleid')} else {
                    cicleids += '-'+$(this).attr('cicleid');    
                }    
            });

           // 创建websocket
           ws = new WebSocket("ws://127.0.0.1:8585");
           // 当socket连接打开时，将uid和昵称传过去
           ws.onopen = onopen;

           // 当有消息时根据消息类型显示不同信息
           ws.onmessage = onmessage; 
           ws.onclose = function() {
              console.log("连接关闭，定时重连");
              connect();
           };
           ws.onerror = function() {
              console.log("出现错误");
           };
        }

        function onopen() {
            // 登录后进入页面websocket握手成功绑定uid,头像等信息
            var loginData = '{"type":"login","uid":'+uid+',"relaname":"'+relaname+'","avator":"'+avator+'","cicles":"'+cicleids+'"}';
            console.log('握手成功, websocket通道已经打开'+loginData);
            ws.send(loginData);
        }

        function onmessage(e) {
            console.log(e.data);
            var dataArr = JSON.parse(e.data);
            switch(dataArr.type) {
                case 'cicle':                   // 群的聊天通知
                    $("#cicle"+dataArr.data.cicleid).find('.mui-ellipsis').text(dataArr.data.msg);
                    $("#cicle"+dataArr.data.cicleid).find('.time').text(dataArr.data.dates);
                    // alert(dataArr.data.msg);
                break;
            }
        }

    </script>
</body>
</html>